<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 禾行通</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
        }
        .login-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .login-header {
            background: linear-gradient(45deg, #28a745, #20c997);
            color: white;
            padding: 2rem;
            text-align: center;
        }
        .tab-content {
            padding: 2rem;
        }
        .form-control {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            padding: 12px 15px;
        }
        .btn-primary {
            background: linear-gradient(45deg, #28a745, #20c997);
            border: none;
            border-radius: 10px;
            padding: 12px;
            font-weight: 600;
        }
        .nav-pills .nav-link {
            border-radius: 10px;
            margin: 0 5px;
        }
        .nav-pills .nav-link.active {
            background: linear-gradient(45deg, #28a745, #20c997);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <div class="login-container">
                    <div class="login-header">
                        <h2><i class="fas fa-seedling"></i> 禾行通</h2>
                        <p class="mb-0">智能农场管理系统</p>
                    </div>
                    
                    <!-- 登录/注册选项卡 -->
                    <ul class="nav nav-pills nav-justified mt-3" id="authTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="login-tab" data-bs-toggle="pill" data-bs-target="#login" type="button" role="tab">
                                <i class="fas fa-sign-in-alt"></i> 登录
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="register-tab" data-bs-toggle="pill" data-bs-target="#register" type="button" role="tab">
                                <i class="fas fa-user-plus"></i> 注册
                            </button>
                        </li>
                    </ul>
                    
                    <div class="tab-content" id="authTabsContent">
                        <!-- 登录表单 -->
                        <div class="tab-pane fade show active" id="login" role="tabpanel">
                            <form id="loginForm">
                                <div class="mb-3">
                                    <label class="form-label"><i class="fas fa-phone"></i> 手机号</label>
                                    <input type="tel" class="form-control" id="loginPhone" placeholder="请输入手机号" required>
                                </div>
                                
                                <!-- 登录方式切换 -->
                                <div class="mb-3">
                                    <div class="btn-group w-100" role="group">
                                        <input type="radio" class="btn-check" name="loginType" id="passwordLogin" value="password" checked>
                                        <label class="btn btn-outline-secondary" for="passwordLogin">密码登录</label>
                                        
                                        <input type="radio" class="btn-check" name="loginType" id="codeLogin" value="code">
                                        <label class="btn btn-outline-secondary" for="codeLogin">验证码登录</label>
                                    </div>
                                </div>
                                
                                <!-- 密码输入 -->
                                <div class="mb-3" id="passwordField">
                                    <label class="form-label"><i class="fas fa-lock"></i> 密码</label>
                                    <input type="password" class="form-control" id="loginPassword" placeholder="请输入密码">
                                </div>
                                
                                <!-- 验证码输入 -->
                                <div class="mb-3" id="codeField" style="display: none;">
                                    <label class="form-label"><i class="fas fa-shield-alt"></i> 验证码</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="loginCode" placeholder="请输入验证码">
                                        <button class="btn btn-outline-secondary" type="button" id="sendCodeBtn">发送验证码</button>
                                    </div>
                                </div>
                                
                                <div class="d-grid">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-sign-in-alt"></i> 登录
                                    </button>
                                </div>
                                
                                <div class="text-center mt-3">
                                    <a href="#" class="text-muted" data-bs-toggle="modal" data-bs-target="#forgotModal">
                                        <i class="fas fa-question-circle"></i> 忘记密码？
                                    </a>
                                    <span class="mx-2">|</span>
                                    <a href="#" class="text-muted" data-bs-toggle="modal" data-bs-target="#adminModal">
                                        <i class="fas fa-user-shield"></i> 申请管理员
                                    </a>
                                </div>
                            </form>
                        </div>
                        
                        <!-- 注册表单 -->
                        <div class="tab-pane fade" id="register" role="tabpanel">
                            <form id="registerForm">
                                <div class="mb-3">
                                    <label class="form-label"><i class="fas fa-user"></i> 用户类型</label>
                                    <div class="btn-group w-100" role="group">
                                        <input type="radio" class="btn-check" name="userType" id="farmer" value="farmer" checked>
                                        <label class="btn btn-outline-success" for="farmer">
                                            <i class="fas fa-user"></i> 农户
                                        </label>
                                        
                                        <input type="radio" class="btn-check" name="userType" id="cooperative" value="cooperative">
                                        <label class="btn btn-outline-success" for="cooperative">
                                            <i class="fas fa-users"></i> 合作社
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label"><i class="fas fa-phone"></i> 手机号</label>
                                    <input type="tel" class="form-control" id="registerPhone" placeholder="请输入手机号" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label"><i class="fas fa-shield-alt"></i> 验证码</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="registerCode" placeholder="请输入验证码" required>
                                        <button class="btn btn-outline-secondary" type="button" id="sendRegisterCodeBtn">发送验证码</button>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label"><i class="fas fa-lock"></i> 设置密码</label>
                                    <input type="password" class="form-control" id="registerPassword" placeholder="请设置密码" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label"><i class="fas fa-lock"></i> 确认密码</label>
                                    <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入密码" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label"><i class="fas fa-building"></i> 农场/合作社名称</label>
                                    <input type="text" class="form-control" id="farmName" placeholder="请输入名称" required>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="agreeTerms" required>
                                    <label class="form-check-label" for="agreeTerms">
                                        我已阅读并同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
                                    </label>
                                </div>
                                
                                <div class="d-grid">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-user-plus"></i> 注册
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 忘记密码模态框 -->
    <div class="modal fade" id="forgotModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-key"></i> 重置密码</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="forgotForm">
                        <div class="mb-3">
                            <label class="form-label">手机号</label>
                            <input type="tel" class="form-control" id="forgotPhone" placeholder="请输入注册手机号" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">验证码</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="forgotCode" placeholder="请输入验证码" required>
                                <button class="btn btn-outline-secondary" type="button" id="sendForgotCodeBtn">发送验证码</button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">新密码</label>
                            <input type="password" class="form-control" id="newPassword" placeholder="请输入新密码" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="resetPasswordBtn">重置密码</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 申请管理员模态框 -->
    <div class="modal fade" id="adminModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-user-shield"></i> 申请管理员权限</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="adminForm">
                        <div class="mb-3">
                            <label class="form-label">姓名</label>
                            <input type="text" class="form-control" id="adminName" placeholder="请输入真实姓名" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">手机号</label>
                            <input type="tel" class="form-control" id="adminPhone" placeholder="请输入手机号" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">申请理由</label>
                            <textarea class="form-control" id="adminReason" rows="3" placeholder="请说明申请管理员权限的理由" required></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submitAdminBtn">提交申请</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 登录方式切换
        document.querySelectorAll('input[name="loginType"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const passwordField = document.getElementById('passwordField');
                const codeField = document.getElementById('codeField');
                
                if (this.value === 'password') {
                    passwordField.style.display = 'block';
                    codeField.style.display = 'none';
                } else {
                    passwordField.style.display = 'none';
                    codeField.style.display = 'block';
                }
            });
        });
        
        // 发送验证码功能
        function setupSendCode(buttonId) {
            const button = document.getElementById(buttonId);
            button.addEventListener('click', function() {
                let countdown = 60;
                this.disabled = true;
                this.textContent = `${countdown}秒后重发`;
                
                const timer = setInterval(() => {
                    countdown--;
                    this.textContent = `${countdown}秒后重发`;
                    
                    if (countdown <= 0) {
                        clearInterval(timer);
                        this.disabled = false;
                        this.textContent = '发送验证码';
                    }
                }, 1000);
                
                // 这里添加实际的发送验证码逻辑
                console.log('发送验证码');
            });
        }
        
        setupSendCode('sendCodeBtn');
        setupSendCode('sendRegisterCodeBtn');
        setupSendCode('sendForgotCodeBtn');
        
        // 登录表单提交
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const phone = document.getElementById('loginPhone').value;
            const loginType = document.querySelector('input[name="loginType"]:checked').value;
            
            if (loginType === 'password') {
                const password = document.getElementById('loginPassword').value;
                console.log('密码登录:', { phone, password });
            } else {
                const code = document.getElementById('loginCode').value;
                console.log('验证码登录:', { phone, code });
            }
            
            // 登录成功后跳转到首页
            window.location.href = '/dashboard';
        });
        
        // 注册表单提交
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = {
                userType: document.querySelector('input[name="userType"]:checked').value,
                phone: document.getElementById('registerPhone').value,
                code: document.getElementById('registerCode').value,
                password: document.getElementById('registerPassword').value,
                confirmPassword: document.getElementById('confirmPassword').value,
                farmName: document.getElementById('farmName').value
            };
            
            if (formData.password !== formData.confirmPassword) {
                alert('两次输入的密码不一致');
                return;
            }
            
            console.log('注册信息:', formData);
            alert('注册成功！');
            
            // 注册成功后切换到登录页面
            document.getElementById('login-tab').click();
        });
        
        // 重置密码
        document.getElementById('resetPasswordBtn').addEventListener('click', function() {
            const phone = document.getElementById('forgotPhone').value;
            const code = document.getElementById('forgotCode').value;
            const newPassword = document.getElementById('newPassword').value;
            
            console.log('重置密码:', { phone, code, newPassword });
            alert('密码重置成功！');
            
            // 关闭模态框
            const modal = bootstrap.Modal.getInstance(document.getElementById('forgotModal'));
            modal.hide();
        });
        
        // 申请管理员
        document.getElementById('submitAdminBtn').addEventListener('click', function() {
            const formData = {
                name: document.getElementById('adminName').value,
                phone: document.getElementById('adminPhone').value,
                reason: document.getElementById('adminReason').value
            };
            
            console.log('申请管理员:', formData);
            alert('申请已提交，请等待审核！');
            
            // 关闭模态框
            const modal = bootstrap.Modal.getInstance(document.getElementById('adminModal'));
            modal.hide();
        });
    </script>
</body>
</html>